/*
 * @Author: hongbin
 * @Date: 2022-12-08 10:26:27
 * @LastEditors: hongbin
 * @LastEditTime: 2023-03-31 14:36:14
 * @Description:基本信息
 */

import { FC, useCallback, useEffect, useState } from "react";
import styled, { css } from "styled-components";
import { post } from "../../api";
import { useAuth } from "../../context/AuthProvide";
import { UserInfo } from "../../hook/useRegisterForm";
import { flexCenter, FlexDiv } from "../../styled";
import { Man, Woman } from "../Icon";

interface IProps {
    user: UserInfo;
}

const BaseInfo: FC<IProps> = ({ user }) => {
    const { recordUserInformation } = useAuth();
    const [edit, setEdit] = useState(false);
    const [prev, setPrev] = useState({ ...user });

    useEffect(() => {
        setPrev({ ...user });
    }, [user]);

    const handleEdit = useCallback(() => {
        setEdit((s) => !s);
    }, []);

    const update = () => {
        post("/Auth/update", { ...prev }).then((res) => {
            console.log(res);
            recordUserInformation({ ...prev });
            setEdit(false);
        });
    };

    const change = (key: string, val: string) => {
        setPrev((p) => ({ ...p, [key]: val }));
    };

    return (
        <Container>
            {edit ? (
                <>
                    <FlexDiv>
                        <h2>姓名</h2>
                        <input
                            value={prev.name}
                            onChange={(e) => {
                                change("name", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>学院</h2>
                        <input
                            value={prev.college}
                            onChange={(e) => {
                                change("college", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>专业</h2>
                        <input
                            value={prev.major}
                            onChange={(e) => {
                                change("major", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>兴趣爱好</h2>
                        <input
                            value={prev.interest}
                            onChange={(e) => {
                                change("interest", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>交友格言</h2>
                        <input
                            value={prev.statement}
                            onChange={(e) => {
                                change("statement", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>年龄</h2>
                        <input
                            type="number"
                            value={prev.age}
                            onChange={(e) => {
                                change("age", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>性别</h2>
                        <select
                            onChange={(e) => {
                                change("sex", e.target.value);
                            }}
                            value={prev.sex}
                        >
                            <option value={"男"}>男</option>
                            <option value={"女"}>女</option>
                        </select>
                    </FlexDiv>
                    <button
                        onClick={() => {
                            setEdit(false);
                        }}
                    >
                        取消
                    </button>
                    <button onClick={update}>更新</button>
                </>
            ) : (
                <>
                    <FlexDiv items="center">
                        <h1>{user.name}</h1>
                        <FlexDiv items="center">
                            {user.age} {user.sex == "男" ? <Man /> : <Woman />}
                        </FlexDiv>
                    </FlexDiv>
                    <span>学院：{user.college}</span>
                    <span>专业：{user.major}</span>
                    <FlexDiv>
                        <span>兴趣爱好: {user.interest}</span>
                    </FlexDiv>
                    <FlexDiv
                        css={css`
                            span {
                                background: #062604;
                                padding: 0.3vh 0.3vw;
                            }
                        `}
                    >
                        <span>交友格言:{user.statement}</span>
                    </FlexDiv>
                    <button onClick={handleEdit}>编辑个人资料</button>
                </>
            )}
        </Container>
    );
};

export default BaseInfo;

const Container = styled.div`
    background: #033c00;
    padding: 1vh 1vw;
    color: #fffae5;
    font-size: max(13px, 1vw);
    border-radius: 1vw;
    display: flex;
    flex-direction: column;

    h1 {
        margin-right: 1vw;
    }
    svg {
        width: max(15px, 2vw);
        height: max(15px, 2vw);
    }
    & > * {
        margin: 1vh;
    }
    transition: all 0.3s linear;

    input {
        border-radius: 1vmin;
        border: none;
        margin-left: 1vmin;
        padding-left: 1vmin;
    }
`;
